<template>
    <div class="right" ref="rightRef">
        <!-- 为空 -->
        <div class="right-bg" v-if="isEmpty">
            <a-empty></a-empty>
        </div>
        <span v-if="chatType === 'chat'">
            <!-- 群聊人员 -->
            <RightInfo ref="rightInfoRef"
                       :userList="userList"
                       @handleManageUser="handleManageUser"
                       @sendMsg="isEmpty = true; mitt.emit('sendMsg', $event)"/>
            <!-- 会话主题 -->
            <TopicInfo ref="topicInfoRef"/>
            <!-- 聊天区 -->
            <RightChat ref="rightChatRef" :userList="userList" @inputVal="mitt.emit('inputVal', $event)"/>
        </span>
        <!-- AppMsgList应用消息列表 -->
        <template v-if="chatType === 'app'">
            <component :is="myComponent" ref="myComponentRef" @handleClose="handleClose" @handleMsg="handleMsg" :appMsgDetail="appMsgDetail" :systemInfo="systemInfo"></component>
        </template>
    </div>
</template>
<script lang="ts" setup>
import mitt from "@/utils/bus";
import RightInfo from './RightInfo.vue';
import RightChat from './RightChat.vue';
import TopicInfo from "@/views/msg/components/TopicInfo.vue";

const AppMsgList = defineAsyncComponent(() => import('./AppMsgList.vue'));
const AppMsgDetail = defineAsyncComponent(() => import('./AppMsgDetail.vue'));
const rightInfoRef = ref(null);
const topicInfoRef = ref(false);
const rightChatRef = ref(null);
const myComponent = ref(null);
const myComponentRef = ref(null);
const rightRef = ref(null);
const chatType = ref('chat'); // chat会话  app应用消息
const isEmpty = ref(true); // 是否为空
const appMsgDetail = ref({}); // 系统消息详情
const userList = ref([]); // 用户列表
const systemInfo = ref({}); // 系统信息

// 切换群聊查看记录和详情
mitt.on('handleChat', row => {
    // console.log('right切换信息===', {...row});
    chatType.value = row.chatType || 'chat';
    let isDetail = row.isDetail || false; // 是否获取详情
    nextTick(async () => {
        isEmpty.value = row.isEmpty || false;
        if(row.messageType === 'SYSTEM_MESSAGE'){ // 应用消息
            row.lastMsg.messageType = 'SYSTEM_MESSAGE';
            systemInfo.value = row;
            myComponent.value = AppMsgList;
        }else if(row.messageType === 'GROUP_MESSAGE'){ // 会话列表
            if(rightChatRef.value){
                row.lastMsg.messageType = 'GROUP_MESSAGE';
                rightChatRef.value.currentGroupInfo = row;
                const { btnType } = row;
                if(!isEmpty.value){
                    rightChatRef.value.handleChatType(row);
                }
            }
        }
    })
})

// 应用消息跳转
const handleMsg = (value) => {
    // console.log('value====', value );
    if(value === 'back'){ // 返回
        myComponent.value = AppMsgList;
    }else{ // 查看详情
        const { coverUrl, jumpPage, app: { id } } = value;
        // 查看详情点击后，如果传递的是 content 在当前页面查看其富文本内容，其内容参照Editor.js 的 json 格式；如果是 jumpPage 跳转到其连接。
        if(jumpPage){

        }else{
            appMsgDetail.value = value;
            myComponent.value = AppMsgDetail;
        }
    }
}

// 接收用户列表
mitt.on('userList', list => {
    userList.value = list;
})
</script>
<style lang="scss" scoped>
.right{
    padding: 10px 0;
    position: relative;
    background: white;
    &-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 999;
    }
    &-empty{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1001;
        background: white;
        width: 100%;
        height: 100%;
    }
}
</style>